<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
	height: 100%
}
body {
	height: 100%;
	margin: 0;
	padding: 0
}
#map-canvas {
	height: 100%
}
</style>
<script type="text/javascript" src="assets/js/google-maps.js"></script>
<script type="text/javascript" src="assets/js/underscore-min.js"></script>
<script type="text/javascript" src="assets/firebase/firebase.js"></script>
<script type="text/javascript">
	var markers = [];
	function initialize() {
		var mapOptions = {
			center : new google.maps.LatLng(18.501424, 73.853316),
			zoom : 15,
			mapTypeId : google.maps.MapTypeId.HYBRID
		};
		var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
		
		var firebaseRef = new Firebase('https://sumitteke.firebaseio.com/');
		
		firebaseRef.on('child_added', function(childSnapshot, prevChildName) {
			addMarker(map, childSnapshot);
		});
		
		firebaseRef.on('child_changed', function(childSnapshot, prevChildName) {
			moveMarker(map, childSnapshot);
		});
		
	}
	
	function addMarker(map, data) {
		
		var marker = new google.maps.Marker({
			position : new google.maps.LatLng(data.child('location').child('latitude').val(), data.child('location').child('longitude').val()),
			map : map,
			icon: './assets/images/car.png',
			title : data.name()
		});
		var infowindow = new google.maps.InfoWindow({
			content : "<h5>" + data.name() + "<br/>" + data.child('driver').child('name').val() + "</h5>" + data.child('driver').child('mobile').val() 
		});
		google.maps.event.addListener(marker, 'click', function() {
			infowindow.open(map, marker);
		});
		markers.push(marker);
	}
	
	function moveMarker(map, data) {
		var marker = _.find(markers, function(marker){
			return marker.title == data.name();
		});
		marker.setPosition(new google.maps.LatLng(data.child('latitude').val(), data.child('longitude').val()));
	}
	
	google.maps.event.addDomListener(window, 'load', initialize);
	
</script>
</head>
<body>
	<div id="map-canvas"></div>
</body>
</html>